<#include "/able/_inc/_head.html"/>
<#include "/able/_inc/_layout.html"/>

<!DOCTYPE HTML>
<!--[if IE 8]><html class="ie8" lang="en"><![endif]-->
<!--[if IE 9]><html class="ie9" lang="en"><![endif]-->
<!--[if !IE]><!-->
<html lang="${lang}">

<head>
    <@head />
    <link href="/vendor/bootstrap-fileinput/jasny-bootstrap.min.css" rel="stylesheet" media="screen">
</head>
<body>
<@layout>
<div class="wrap-content" id="container">

<!-- start: PAGE TITLE -->
<section id="page-title">
    <div class="row">
        <div class="col-sm-8">
            <label>个人信息设置</label>
        </div>

    </div>
</section>
<!-- end: PAGE TITLE -->
<!-- start: USER PROFILE -->
<div class="container-fluid container-fullw bg-white">
    <div class="row">
        <div class="col-md-12">

            <div class="alert alert-info">
                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
                <div><i class="fa fa-question-circle"></i>操作提示</div>
                <ul>
                    <li>标识“<em>*</em>”的选项为必填项，其余为选填项。</li>
                    <li>请设置合适图片尺寸，推荐230x230像素。</li>
                    <li>步骤：个人信息-个人信息设置-编辑，填写好信息，直接点击更新。</li>
                </ul>
            </div>

            <div class="tabbable">
                <ul class="nav nav-tabs tab-padding tab-space-3 tab-blue" id="myTab4">
                    <li class="active">
                        <a data-toggle="tab" href="#panel_overview">
                            查看
                        </a>
                    </li>
                    <li>
                        <a data-toggle="tab" href="#panel_edit_account">
                           编辑
                        </a>
                    </li>
                    <li>
                        <a data-toggle="tab" href="#panel_modif_pwd">
                            修改密码
                        </a>
                    </li>

                </ul>
                <div class="tab-content">

                    <div id="panel_overview" class="tab-pane fade in active">
                        <div class="row">
                            <div class="col-sm-5 col-md-4">
                                <div class="user-left">

                                    <div class="center">
                                        <h4>${model.nickName}(${model.name})</h4>
                                        <div class="fileinput fileinput-new" data-provides="fileinput">
                                            <div class="user-image">
                                                <div class="fileinput-new thumbnail">
                                                    <img src="${model.avatar}" alt="${model.nickName}(${model.name})" onerror="this.src='/assets/images/default-user.png'">
                                                </div>
                                                <div class="fileinput-preview fileinput-exists thumbnail"></div>
                                                <!--<div class="user-image-buttons">
                                                    <span class="btn btn-azure btn-file btn-sm"><span class="fileinput-new"><i class="fa fa-pencil"></i></span><span class="fileinput-exists"><i class="fa fa-pencil"></i></span>
                                                        <input type="file">
                                                    </span>
                                                    <a href="#" class="btn fileinput-exists btn-red btn-sm" data-dismiss="fileinput">
                                                        <i class="fa fa-times"></i>
                                                    </a>
                                                </div>-->
                                            </div>
                                        </div>

                                        <hr>
                                    </div>

                                    <table class="table table-condensed">
                                        <thead>
                                        <tr>
                                            <th colspan="3">联系信息</th>
                                        </tr>
                                        </thead>
                                        <tbody>

                                        <tr>
                                            <td>电子邮件:</td>
                                            <td>
                                                <!--<a href="">-->
                                                    ${model.eMail}
                                                <!--</a>-->
                                            </td>
                                            <!--<td><a href="#panel_edit_account" class="show-tab"><i class="fa fa-pencil edit-user-info"></i></a></td>-->
                                        </tr>
                                        <tr>
                                            <td>电话:</td>
                                            <td>${model.phone}</td>
                                            <!--<td><a href="#panel_edit_account" class="show-tab"><i class="fa fa-pencil edit-user-info"></i></a></td>-->
                                        </tr>

                                        </tbody>
                                    </table>

                                </div>
                            </div>
                            <div class="col-sm-7 col-md-8">

                                <div class="panel panel-white" id="activities">
                                    <div class="panel-heading border-light">
                                        <h4 class="panel-title text-primary">最近动态</h4>
                                        <paneltool class="panel-tools" tool-collapse="tool-collapse" tool-refresh="load1" tool-dismiss="tool-dismiss"></paneltool>
                                    </div>
                                    <div collapse="activities" ng-init="activities=false" class="panel-wrapper">
                                        <div class="panel-body">
                                            <ul class="timeline-xs">
                                                <li class="timeline-item success">
                                                    <div class="margin-left-15">
                                                        <div class="text-muted text-small">
                                                            &nbsp;
                                                        </div>
                                                        <p>
                                                            没有任何动态信息...
                                                        </p>
                                                    </div>
                                                </li>

                                            </ul>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                    <div id="panel_edit_account" class="tab-pane fade">
                        <form action="#" role="form" id="form">
                            <fieldset>
                                <legend>
                                    用户信息
                                </legend>
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label class="control-label">
                                                用户名
                                            </label>
                                            <input type="hidden" name="userId" value="${model.userId}">
                                            <input type="text" placeholder="用户名" class="form-control" readonly value="${model.name}">
                                        </div>
                                        <div class="form-group">
                                            <label class="control-label">
                                               昵称(真实姓名)：<span class="symbol required" aria-required="true"></span>
                                            </label>
                                            <input type="text" placeholder="昵称(真实姓名)" name="nickName" value="${model.nickName}" class="form-control required">
                                        </div>
                                        <div class="form-group">
                                            <label class="control-label">
                                                电子邮件：<span class="symbol required" aria-required="true"></span>
                                            </label>
                                            <input type="email" placeholder="xzjie@example.com"   name="eMail" value="${model.eMail}" class="form-control required email">
                                        </div>
                                        <div class="form-group">
                                            <label class="control-label">
                                                电话：<span class="symbol required" aria-required="true"></span>
                                            </label>
                                            <input type="text" placeholder="189*********"   name="phone" value="${model.phone}" class="form-control required number">
                                        </div>

                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label class="control-label">
                                                性别：<span class="symbol required" aria-required="true"></span>
                                            </label>
                                            <div class="clip-radio radio-primary">
                                                <input type="radio" value="1" name="sex" id="us-female" <#if model.sex=="1">checked</#if>>
                                                <label for="us-female">
                                                    男
                                                </label>
                                                <input type="radio" value="2" name="sex" id="us-male" <#if model.sex=="2">checked</#if> >
                                                <label for="us-male">
                                                    女
                                                </label>
                                            </div>
                                        </div>

                                        <div class="form-group">
                                            <input type="hidden" name="avatar" id="avatar" value="${model.avatar}">
                                            <div  class="fileinput fileinput-new" data-provides="fileinput">
                                                <div class="fileinput-new thumbnail">
                                                    <img src="${model.avatar}" alt="${model.nickName}(${model.name})" onerror="this.src='/assets/images/default-user.png'">
                                                </div>
                                                <div class="fileinput-preview fileinput-exists thumbnail"></div>
                                                <div class="user-edit-image-buttons">
                                                    <span class="btn btn-azure btn-file">
                                                        <span class="fileinput-new"><i class="fa fa-picture"></i> 选择图片</span>
                                                        <span class="fileinput-exists"><i class="fa fa-picture"></i> 换图</span>
                                                        <input id="btn-file" name="file" type="file">
                                                    </span>
                                                    <a href="#" class="btn fileinput-exists btn-red" data-dismiss="fileinput">
                                                        <i class="fa fa-times"></i> 移除
                                                    </a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </fieldset>

                            <!--<div class="row">
                                <div class="col-md-12">
                                    <div>
                                        Required Fields
                                        <hr>
                                    </div>
                                </div>
                            </div>-->
                            <div class="row">
                                <div class="col-md-8">
                                    <p>
                                        填写好信息，直接点击更新
                                    </p>
                                </div>
                                <div class="col-md-4">
                                    <button  class="btn btn-primary pull-right" type="submit">
                                        修改 <i class="fa fa-arrow-circle-right"></i>
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div id="panel_modif_pwd" class="tab-pane fade">
                        <form action="#" role="form" id="form_pwd">
                            <fieldset>
                                <legend>
                                    修改密码
                                </legend>
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label class="control-label">
                                                新密码<span class="symbol required" aria-required="true"></span>
                                            </label>
                                            <input type="password" placeholder="新密码" id="password" name="password" class="form-control required" value="">
                                        </div>
                                        <div class="form-group">
                                            <label class="control-label">
                                                确认新密码：<span class="symbol required" aria-required="true"></span>
                                            </label>
                                            <input type="password" placeholder="确认新密码" name="password2"  class="form-control required" value="">
                                        </div>
                                        <!--
                                        <div class="row">
                                            <div class="col-md-8">
                                                <div class="form-group">
                                                    <label class="control-label">
                                                        邮箱验证码：<span class="symbol required" aria-required="true"></span>
                                                    </label>
                                                    <input type="email" placeholder="xzjie@example.com"  name="eMail" value="${model.eMail}" class="form-control required email">
                                                </div>
                                            </div>
                                            <div class="col-md-4">
                                                <div class="form-group">
                                                    <label class="control-label">
                                                        &nbsp;

                                                    </label>
                                                <button  class="btn btn-primary form-control" type="button">
                                                    发送邮箱验证码
                                                </button>
                                                </div>
                                            </div>
                                        </div>-->
                                        <div class="row">
                                            <div class="col-md-8">
                                                <p>
                                                    注意密码安全，使用字母,数字,字符
                                                </p>
                                            </div>
                                            <div class="col-md-4">
                                                <button id="btn_pwd" class="btn btn-primary pull-right" type="submit">
                                                    确定 <i class="fa fa-arrow-circle-right"></i>
                                                </button>
                                            </div>
                                        </div>


                                    </div>
                                    <div class="col-md-6">



                                    </div>
                                </div>
                            </fieldset>

                            <div class="row">
                                <!--<div class="col-md-8">
                                    <p>
                                        填写好信息，直接点击更新
                                    </p>
                                </div>
                                <div class="col-md-4">
                                    <button  class="btn btn-primary pull-right" type="submit">
                                        修改 <i class="fa fa-arrow-circle-right"></i>
                                    </button>
                                </div>-->
                            </div>
                        </form>
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>
<!-- end: USER PROFILE -->
</@layout>
<script src="/vendor/bootstrap-fileinput/jasny-bootstrap.js"></script>
<script src="/vendor/jquery-ajaxfileupload/jquery.ajaxfileupload.js"></script>
<script type="text/javascript">

    var validateCheckRadio = function (val) {
        $("input[type='radio'], input[type='checkbox']").on('ifChecked', function(event) {
            $(this).parent().closest(".has-error").removeClass("has-error").addClass("has-success").find(".help-block").hide().end().find('.symbol').addClass('ok');
        });
    };
    var FormValidator = function () {
        "use strict";
        // function to initiate Validation Sample 2
        var runValidator2 = function () {
            var form = $('#form');
            var errorHandler2 = $('.errorHandler', form);
            var successHandler2 = $('.successHandler', form);

            form.validate({
                errorElement: "span", // contain the error msg in a small tag
                errorClass: 'help-block',
                errorPlacement: function (error, element) { // render error placement for each input type
                    if (element.attr("type") == "radio" || element.attr("type") == "checkbox") { // for chosen elements, need to insert the error after the chosen container
                        error.insertAfter($(element).closest('.form-group').children('div').children().last());
                    } else if (element.hasClass("ckeditor")) {
                        error.appendTo($(element).closest('.form-group'));
                    } else {
                        error.insertAfter(element);
                        // for other inputs, just perform default behavior
                    }
                },
                ignore: "",
                rules: {
                },
                messages: {

                },
                invalidHandler: function (event, validator) { //display error alert on form submit
                    successHandler2.hide();
                    errorHandler2.show();
                },
                highlight: function (element) {
                    $(element).closest('.help-block').removeClass('valid');
                    // display OK icon
                    $(element).closest('.form-group').removeClass('has-success').addClass('has-error').find('.symbol').removeClass('ok').addClass('required');
                    // add the Bootstrap error class to the control group
                },
                unhighlight: function (element) { // revert the change done by hightlight
                    $(element).closest('.form-group').removeClass('has-error');
                    // set error class to the control group
                },
                success: function (label, element) {
                    label.addClass('help-block valid');
                    // mark the current input as valid and display OK icon
                    $(element).closest('.form-group').removeClass('has-error').addClass('has-success').find('.symbol').removeClass('required').addClass('ok');
                },
                submitHandler: function (form) {
                    successHandler2.show();
                    errorHandler2.hide();
                    // submit form
                    //$('#form2').submit();
                    $.ajax({
                        type:'post',
                        url: global.adminPath + '/account/update',
                        async:false, //同步方法，如果用异步的话，flag永远为1
                        dataType:'json',
                        data:$(form).serialize(),
                        success: function(res){
                            if(res.success){
                                layer.msg(res.message, {
                                    icon: 1,
                                    time: 2000, ///2秒关闭（如果不配置，默认是3秒）
                                }, function(){
                                    location.reload();
                                });

                            }else{
                                layer.msg(res.message, {icon: 2});
                            }
                        }
                    });
                }
            });
            //CKEDITOR.disableAutoInline = true;
            //$('textarea.ckeditor').ckeditor();
        };

        var runModifPwd =function () {
            var form =$('#form_pwd');
            var errorHandler = $('.errorHandler', form);
            var successHandler = $('.successHandler', form);

            form.validate({
                errorElement: "span", // contain the error msg in a small tag
                errorClass: 'help-block',
                errorPlacement: function (error, element) {
                    error.insertAfter(element);
                },
                ignore: "",
                rules: {
                    password:{
                        required: true,
                        regexPassword: true
                    },
                    password2: {
                        required: true,
                        rangelength: [6, 16],
                        equalTo: "#password"
                    }
                },
                messages: {
                    password: {
                        regexPassword: '密码至少包一个大写字母、一个小写字母及一个符号，长度至少6位'
                    },
                    password2:{
                        equalTo: "两次输入密码不一致",
                        rangelength: "确认密码不能小于6个字符"
                    }

                },
                invalidHandler: function (event, validator) { //display error alert on form submit
                    successHandler.hide();
                    errorHandler.show();
                },
                highlight: function (element) {
                    $(element).closest('.help-block').removeClass('valid');
                    // display OK icon
                    $(element).closest('.form-group').removeClass('has-success').addClass('has-error').find('.symbol').removeClass('ok').addClass('required');
                    // add the Bootstrap error class to the control group
                },
                unhighlight: function (element) { // revert the change done by hightlight
                    $(element).closest('.form-group').removeClass('has-error');
                    // set error class to the control group
                },
                success: function (label, element) {
                    label.addClass('help-block valid');
                    // mark the current input as valid and display OK icon
                    $(element).closest('.form-group').removeClass('has-error').addClass('has-success').find('.symbol').removeClass('required').addClass('ok');
                },
                submitHandler: function (form) {
                    successHandler.show();
                    errorHandler.hide();
                    // submit form
                    //$('#form2').submit();
                    $.ajax({
                        type:'post',
                        url: global.adminPath + '/account/updatepwd',
                        async:false, //同步方法，如果用异步的话，flag永远为1
                        dataType:'json',
                        data:$(form).serialize(),
                        success: function(res){
                            if(res.success){
                                layer.msg(res.message, {
                                    icon: 1,
                                    time: 2000,
                                }, function(){
                                    location.href='/logout';
                                });

                            }else{
                                layer.msg(res.message, {icon: 2});
                            }
                        }
                    });
                }
            });
        }
        return {
            //main function to initiate template pages
            init: function () {
                validateCheckRadio();
                runValidator2();
                runModifPwd();
            }
        };
    }();

    $(function () {

        FormValidator.init();

        $('#btn-file').ajaxfileupload({
            action: '/upload/avatar',
            valid_extensions : ['jpg', 'gif', 'png'],
            params: {},
            onComplete: function(res) {
               if(res.success){
                $('#avatar').val(res.url);
               }else {
                   layer.msg(JSON.stringify(res), {icon: 2});
               }
            },
            onStart: function() {
            },
            onCancel: function() {
            }
        });


    });

</script>